﻿@model MovingFromPartialViews.Models.IndexModel

<div class="container">
    <div class="hero-unit">
        <h1>Sample application</h1>
        <p>This sample application is used to demonstrate moving from ASP.NET MVC Partial Views
            to a system of AJAX + Client Side rendering.
        </p>
        <p>This example explained is available at <a href="http://visualstudiomagazine.com/articles/2013/05/01/moving-from-partial-views-to-ajax-calls.aspx">here</a></p>
    </div>    
</div>

<div class="container">
    <div id="categoryList">
        @Html.Partial("CategoryList", Model)
    </div>
    <div id="addItem">
        @using (Html.BeginForm("Add", "Home"))
        {
            <div class="row">
                <div class="span3">
                    @Html.DropDownList("CategoryName", Model.AllCategories.Select(s => new SelectListItem {Text = s, Value = s}))
                </div>
                <div class="span9">
                    <div class="input-append">
                        @Html.TextBox("Name", "", new { @class = "span8" })    
                        <button class="btn btn-primary">Add</button>
                    </div>
                </div>
            </div>
        }
    </div>
    @using (Html.BeginForm("Delete", "Home", FormMethod.Post, new {id = "deleteForm"}))
    {
        @Html.Hidden("subName")
    }
</div>
@section scripts
{
    <script type="text/javascript">
        $(function () {
            $(document).on('click', 'button[action=del]', function (e) {
                var name = e.target.attributes["data-name"].value;
                $('#subName').val(name);
                $('#deleteForm').submit();
            });
        });
    </script>
}
